import { Descriptions, Button, message } from 'antd';
import QRCode from 'qrcode.react';
import { CopyToClipboard } from 'react-copy-to-clipboard';

interface QRCodeProps {
  qrcode: string | undefined,
}

const QRCodeContainer = ({ qrcode }: QRCodeProps) => {
  if (!qrcode) return null;

  return (
    <Descriptions
      size="small"
      style={{ width: '100%' }}
      layout="vertical"
      column={2}
      bordered
    >
      <Descriptions.Item
        label="二维码（右键可保存）"
        span={2}
        contentStyle={{
          display: 'flex',
          justifyContent: 'center',
        }}
      >
        <div style={{
          display: 'flex',
          flexDirection: 'column'
        }}
        >
          <QRCode
            value={qrcode ?? ''}
            size={200}
          />
        </div>
      </Descriptions.Item>
      <Descriptions.Item
        label="问卷链接"
        span={2}
        contentStyle={{
          display: 'flex',
          justifyContent: 'center',
        }}
      >
        <CopyToClipboard
          text={qrcode}
          onCopy={() => message.success('复制问卷链接成功')}
        >
          <Button
            type="primary"
          >
            复制问卷链接
          </Button>
        </CopyToClipboard>
      </Descriptions.Item>
    </Descriptions>
  );
};

export default QRCodeContainer;
